<!-- <template>
	<view class="main">
		<view v-if="pageList.includes(1)" class="page1">
			<view></view>
			<view>
				<view class="flow-info">
					<view class="flow-info-title">
						<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
						<text>工作流程介绍</text>
						<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
					</view>
					<view class="flow-info-content">
						<view class="flow-info-content-list" v-for="item in flow_info_content">
							<view class="flow-info-content-navigation-item-view">
								<view class="flow-info-content-navigation-item">{{item[0]}}</view>
								<view class="flow-info-content-navigation-item-line"
									v-if="item[0]!=flow_info_content.length"></view>
							</view>
							<view class="flow-info-content-list-texts"
								:style="{'margin-bottom':item[0]==flow_info_content.length?'0':'50rpx'}">
								<text class="flow-info-content-navigation-item-titleText">{{item[1]}}</text>
								<text class="flow-info-content-navigation-item-text">{{item[2]}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="flow-info-title">
					<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
					<text>如何接单</text>
					<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
				</view>
				<view class="jiedan-info-text-tiaoxuanrenwu">
					<text>挑选任务</text>
					<text>通过类型、薪酬、距离等详细信息来确认是不是要接取该任务</text>
				</view>
				<view class="jiedan-info-text-baomingrenwu" :style="{'margin-top':windowHeight<600?'240rpx':''}">
					<text>报名任务</text>
					<text>对于心仪的任务，即时报名才可以不被抢走。报名后取消会有限制，请谨慎报名</text>
				</view>
			</view>
		</view>
		<view v-if="pageList.includes(2)" class="page2">
			<view>
				<view class="jiedan-info-text-kaishougong">
					<text>开工收工</text>
					<text>报名后才可以通过与雇主的联系获得更准确更具提的任务信息。沟通后要接取才能正式获得工作资格</text>
				</view>
			</view>
			<view>
				<view class="flow-info-title">
					<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
					<text>如何工作</text>
					<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
				</view>
				<view class="jiedan-info-text-renwukaigong">
					<text>任务开工</text>
					<text>按照确认过的开始时间到达工作地点后，在与雇主确认下进行开工</text>
				</view>
			</view>
			<view>
				<view class="jiedan-info-text-renwushougong">
					<text>任务收工</text>
					<text>工作达标完成后，需要在与雇主确认下进行收工来确认具体的工作达标数</text>
				</view>
			</view>
		</view>
		<view v-if="pageList.includes(3)" class="page3">
			<view>
				<view class="jiedan-info-text-xinzijiesuan">
					<text>结算薪资</text>
					<text>确认工作达标数无误后，由雇主来进行薪酬结算。离开工作地点后确认任务结束</text>
				</view>
			</view>
			<view>
				<view class="ruhetixian-view">
					<view class="flow-info-title">
						<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
						<text>如何提现</text>
						<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
					</view>
					<text>薪酬被结算后金额会实时到达您的平台账户内，需要在绑定第三方支付（支付宝、微信、银行卡）后，再发起提现</text>
					<image src="https://images.linglinggong.net/static/icon3/dasdasdasas11111.png" mode="aspectFill"></image>
				</view>
			</view>
			<view>
				<view class="flow-info-title">
					<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
					<text>常见问题</text>
					<image src="https://images.linglinggong.net/static/icon3/gfhjk.png" mode="aspectFill"></image>
				</view>
				<view class="questions-and-answers" style="margin: 84rpx auto 0 auto;">
					<view class="questions">
						<view>问</view><text>怎么任务的工价是不同颜色的？</text>
					</view>
					<view class="answers">
						<view>答</view><text>绿色的工价称之为绿单，需要金牌身份才可以接取。红色的工价称之为红单，是不需要身份等级限制的</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="pageList.includes(4)" class="page4">
			<view>
				<view class="questions-and-answers" style="margin: 0rpx auto 0 auto;padding-top: 88rpx;">
					<view class="questions">
						<view>问</view><text>报名之后是一定要拨打电话的吗？</text>
					</view>
					<view class="answers">
						<view>答</view>
						<text>为了任务内容的真实性和确认性，需要电话沟通之后才能接取订单。如果您已是老雇员，无需电话联系，直接接取订单。另外部分任务被设置了免打扰模式，这类任务的雇主不希望被打扰，当然也可无需电话联系直接接单！</text>
					</view>
				</view>
			</view>
			<view>
				<view>
					<view class="questions-and-answers" style="margin: 0rpx auto 0 auto;padding-top: 68rpx;">
						<view class="questions">
							<view>问</view><text>如果不能准时准地怎么办？</text>
						</view>
						<view class="answers">
							<view>答</view>
							<text>开工是会检测真实距离的，所以要准时到达工作地点。如果提前或者迟到的进行开工/收工，平台都会做记录，在任务结束后了解真实情况。如情况恶劣，会做限制接单处理</text>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="questions-and-answers" style="margin: 0rpx auto 0 auto;padding-top: 68rpx;">
					<view class="questions">
						<view>问</view><text>为什么会被限制接单了？</text>
					</view>
					<view class="answers">
						<view>答</view><text>平台做了限制接单的相关红线规则，请勿触碰<text class="a-text"
								@click="goToPage('/pages/help-detail/help-detail?id=14')">具体查看>></text></text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="pageList.includes(5)" class="page5">
			<view>
				<view class="questions-and-answers" style="margin: 0rpx auto 0 auto;padding-top: 68rpx;">
					<view class="questions">
						<view>问</view><text>提现的时间和服务费用如何？</text>
					</view>
					<view class="answers">
						<view>答</view><text>09:00-18:00 预计2小时左右到账，其他时段会在次日10:00 前到账，服务费用根据用户等级的不同有具体的划分</text>
					</view>
				</view>
			</view>
			<view>
				<view class="more-text">更多问题前往<text @click="goToPage('/pages/help/help')">[帮助中心]</text>为您解答</view>
				<view class="help-view">
					<text class="text1">客服电话</text>
					<text class="text2">{{kefu_phone}}</text>
					<view @click="call_phone()">拨打</view>
					<text class="text1">客服微信</text>
					<text class="text2">{{kefu_wechat}}</text>
					<view @click="copy_wechat()">复制</view>
				</view>
			</view>
			<view></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pageList: [1],
				flow_info_content: [
					[1, '查看任务', '挑选心仪的任务，并查看具体的任务信息'],
					[2, '报名接单', '进行报名，再与雇主沟通后接取订单'],
					[3, '开工收工', '准时在开工地点进行开工，工作完成后进行收工'],
					[4, '结算提现', '结算薪酬后，离开工作地点。可以随时进行多平台提现']
				],
				kefu_phone: '',
				kefu_wechat: '',
				windowHeight: 0
			}
		},
		methods: {
			goToPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			call_phone() {
				uni.makePhoneCall({
					phoneNumber: this.kefu_phone
				})
			},
			copy_wechat() {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: this.kefu_wechat,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
				// #endif
				// #ifdef H5
				let input = document.createElement('input');
				input.setAttribute('readonly', 'readonly');
				input.setAttribute('value', this.kefu_wechat);
				document.body.appendChild(input);
				input.select()
				if (document.execCommand('copy')) {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
					document.body.removeChild(input)
					//success info
				}
				// #endif
			},
		},
		onReachBottom() {
			if (this.pageList.length < 5) {
				let num = this.pageList[this.pageList.length - 1]
				num += 1
				this.pageList.push(num)
			}
		},
		onLoad() {
			this.kefu_phone = uni.getStorageSync('property_list_by_type').telephone
			this.kefu_wechat = uni.getStorageSync('property_list_by_type').kefu_wechat
		},
		onReady() {
			if (uni.getSystemInfoSync().windowWidth > 950) {
				document.getElementsByClassName('main')[0].style.width = "375px"
				document.getElementsByClassName('main')[0].style.transformOrigin = "top"
				document.getElementsByClassName('main')[0].style.transform = "scale(2)"
			}
			if (uni.getSystemInfoSync().windowHeight > 600) {
				console.log(uni.getSystemInfoSync().windowHeight)
				this.windowHeight = uni.getSystemInfoSync().windowHeight
			} else {
				this.windowHeight = 0
			}
		},
	}
</script>
<style lang="less" scoped>
	.main {
		width: 750rpx;
		margin: 0 auto;
	}

	.bg-cover {
		background-size: cover;
	}

	.page1 {
		&>view:nth-child(1) {
			// width: 750rpx;
			height: 591rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_01.jpg);
			.bg-cover;
		}

		&>view:nth-child(2) {
			// width: 750rpx;
			height: 768rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_02.jpg);
			.bg-cover;
		}

		&>view:nth-child(3) {
			// width: 750rpx;
			height: 911rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_03.jpg);
			.bg-cover;
		}
	}

	.page2 {
		&>view:nth-child(1) {
			// width: 750rpx;
			height: 454rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_04.jpg);
			.bg-cover;
		}

		&>view:nth-child(2) {
			// width: 750rpx;
			height: 530rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_05.jpg);
			.bg-cover;
		}

		&>view:nth-child(3) {
			// width: 750rpx;
			height: 380rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_06.jpg);
			.bg-cover;
		}
	}

	.page3 {
		&>view:nth-child(1) {
			// width: 750rpx;
			height: 426rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_07.jpg);
			.bg-cover;
		}

		&>view:nth-child(2) {
			// width: 750rpx;
			height: 100%;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_08.jpg);
			.bg-cover;
			display: flex;
			justify-content: center;
		}

		&>view:nth-child(3) {
			// width: 750rpx;
			height: 424rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_09.jpg);
			.bg-cover;
		}
	}

	.page4 {
		&>view:nth-child(1) {
			// width: 750rpx;
			height: 430rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_10.jpg);
			.bg-cover;
		}

		&>view:nth-child(2) {
			// width: 750rpx;
			height: 351rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_11.jpg);
			.bg-cover;
		}

		&>view:nth-child(3) {
			// width: 750rpx;
			height: 275rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_12.jpg);
			.bg-cover;
		}
	}

	.page5 {
		&>view:nth-child(1) {
			// width: 750rpx;
			height: 307rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_13.jpg);
			.bg-cover;
		}

		&>view:nth-child(2) {
			// width: 750rpx;
			height: 636rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_14.jpg);
			.bg-cover;
		}

		&>view:nth-child(3) {
			// width: 750rpx;
			height: 153rpx;
			background-image: url(https://images.linglinggong.net/static/beginnerGuidanceByStaff/a_15.jpg);
			.bg-cover;
		}
	}

	.flow-info {
		width: 694rpx;
		height: 752rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.flow-info-title {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 54rpx;

		&>text {
			font-size: 38rpx;
			font-weight: 800;
			color: #2965FD;
			line-height: 54rpx;
			margin: 0 20rpx;
		}

		&>image {
			width: 36rpx;
			height: 24rpx;
		}

		&>image:nth-child(3) {
			transform: rotateY(180deg);
		}
	}

	.flow-info-content {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
	}

	.flow-info-content-list {
		display: flex;
		flex-direction: row;
	}

	.flow-info-content-list-texts {
		width: 554rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.flow-info-content-navigation-item {
		width: 40rpx;
		height: 40rpx;
		background: #2965FD;
		border-radius: 50%;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: center;
		margin: 0 32rpx 0 38rpx;
	}

	.flow-info-content-navigation-item-titleText {
		font-size: 32rpx;
		font-weight: 800;
		color: #000000;
		line-height: 32rpx;
		margin-bottom: 10rpx;
	}

	.flow-info-content-navigation-item-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #7F7F7F;
		line-height: 44rpx;
	}

	.flow-info-content-navigation-item-view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.flow-info-content-navigation-item-line {
		width: 2px;
		height: 100%;
		background: #ABC3FF;
		margin-left: 5rpx;
	}

	.text-block {
		display: flex;
		flex-direction: column;
		// width: 280rpx;
	}

	.textStyle1 {
		font-size: 32rpx;
		font-weight: 800;
		color: #000000;
		line-height: 54rpx;
	}

	.textStyle2 {
		font-size: 28rpx;
		font-weight: 500;
		color: #7F7F7F;
		line-height: 44rpx;
	}

	.jiedan-info-text-tiaoxuanrenwu {
		.text-block;
		margin-top: 140rpx;
		margin-left: 280rpx;

		&>text:nth-child(1) {
			.textStyle1;
		}

		&>text:nth-child(2) {
			width: 380rpx;
			.textStyle2;
		}
	}

	.jiedan-info-text-baomingrenwu {
		.text-block;
		margin-top: 195rpx;
		margin-left: 100rpx;

		&>text:nth-child(1) {
			.textStyle1;
		}

		&>text:nth-child(2) {
			width: 380rpx;
			.textStyle2;
		}
	}

	.jiedan-info-text-kaishougong {
		.text-block;
		padding-top: 100rpx;
		margin-left: 280rpx;

		&>text:nth-child(1) {
			.textStyle1;
		}

		&>text:nth-child(2) {
			width: 380rpx;
			.textStyle2;
		}
	}

	.jiedan-info-text-renwukaigong {
		.text-block;
		margin-top: 140rpx;
		margin-left: 280rpx;

		&>text:nth-child(1) {
			.textStyle1;
		}

		&>text:nth-child(2) {
			width: 380rpx;
			.textStyle2;
		}
	}

	.jiedan-info-text-renwushougong {
		.text-block;
		padding-top: 95rpx;
		margin-left: 100rpx;

		&>text:nth-child(1) {
			.textStyle1;
		}

		&>text:nth-child(2) {
			width: 380rpx;
			.textStyle2;
		}
	}

	.jiedan-info-text-xinzijiesuan {
		.text-block;
		padding-top: 95rpx;
		margin-left: 280rpx;

		&>text:nth-child(1) {
			.textStyle1;
		}

		&>text:nth-child(2) {
			width: 380rpx;
			.textStyle2;
		}
	}

	.ruhetixian-view {
		width: 694rpx;
		height: 100%;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 20rpx;

		&>text {
			display: inline-block;
			width: 623rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #7F7F7F;
			line-height: 44rpx;
		}

		&>image {
			height: 780rpx;
			width: 351rpx;
			margin-top: 18rpx;
		}
	}

	.questions-and-answers {
		width: 620rpx;

		.questions {
			display: flex;
			flex-direction: row;

			&>view {
				width: 40rpx;
				height: 40rpx;
				background: #2965FD;
				border-radius: 4rpx;
				font-size: 26rpx;
				font-weight: normal;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
				margin-right: 32rpx;
			}

			&>text {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				line-height: 45rpx;
			}
		}

		.answers {
			display: flex;
			flex-direction: row;
			margin-top: 40rpx;

			&>view {
				width: 40rpx;
				height: 40rpx;
				background: #FCC928;
				border-radius: 4rpx;
				font-size: 26rpx;
				font-weight: normal;
				color: #402110;
				text-align: center;
				line-height: 40rpx;
				flex-grow: 0;
				flex-shrink: 0;
				margin-right: 32rpx;
			}

			&>text {
				font-size: 28rpx;
				font-weight: 400;
				color: #494949;
				line-height: 40rpx;
			}
		}
	}

	.a-text {
		font-size: 28rpx;
		font-weight: 400;
		color: #FF0000;
		line-height: 40rpx;
	}

	.more-text {
		padding-top: 90rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 44rpx;

		&>text {
			color: #FF0D0D;
			margin: 0 20rpx;
		}
	}

	.help-view {
		display: flex;
		flex-direction: column;
		align-items: center;

		&>.text1 {
			margin-top: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #555555;
			line-height: 68rpx;
		}

		&>.text1 {
			font-size: 40rpx;
			font-weight: 400;
			color: #000000;
			line-height: 68rpx;
		}

		&>view:nth-child(3) {
			margin-top: 20rpx;
			width: 200rpx;
			height: 60rpx;
			background: #2965FD;
			border-radius: 30rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 60rpx;
		}

		&>view:nth-child(6) {
			margin-top: 20rpx;
			width: 200rpx;
			height: 60rpx;
			border: 2rpx solid #2965FD;
			border-radius: 30rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #2965FD;
			line-height: 60rpx;
		}
	}
</style> -->
<template>
	<view class="content">
		<view class="content-text">
			<view class="more-text">更多问题前往<text @click="goToPage('/pages/help/help')">[帮助中心]</text>为您解答</view>
			<view class="help-view">
				<view class="text1">
					<image src="https://images.linglinggong.net/static/ke.png" mode="" class="img"></image>
					<text>客服电话</text>
				</view>
				<text class="text2">{{kefu_phone}}</text>
				<view class="click" @click="call_phone()">拨打</view>
				<view class="text1">
					<image src="https://images.linglinggong.net/static/wei.png" mode="" class="img"></image>
					<text>客服微信</text>
				</view>
				<text class="text2">{{kefu_wechat}}</text>
				<view class="click1" @click="copy_wechat()">复制</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default ({
		data() {
			return {
				kefu_wechat: uni.getStorageSync('property_list_by_type').kefu_wechat,
				kefu_phone: uni.getStorageSync('property_list_by_type').telephone
			}
		},
		methods: {
			goToPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			call_phone() {
				uni.makePhoneCall({
					phoneNumber: this.kefu_phone
				})
			},
			copy_wechat() {
				uni.setClipboardData({
					data: this.kefu_wechat,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	})
</script>
<style lang="scss" scoped>
	.content {
		background: url('https://images.linglinggong.net/XCX/new1.jpg') center center/cover no-repeat;
		width: 100%;
		height: 10076rpx;
		display: flex;

		&-text {
			align-self: flex-end;
			overflow: hidden;
			width: 654rpx;
			height: 606rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255, 145, 0, 0.3);
			border-radius: 10rpx;
			margin: 0 auto 260rpx;

			.more-text {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 32rpx;

				&>text {
					color: rgba(255, 61, 61, 1);
				}
			}

			.text1 {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				color: #292929;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 50rpx;

				.img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.text2 {
				display: flex;
				justify-content: center;
				font-size: 36rpx;
				font-weight: 400;
				color: #292929;
				text-align: center;
				margin-top: 12rpx;
			}
		}
	}

	.click1,
	.click {
		width: 286rpx;
		height: 70rpx;
		border-radius: 48rpx;
		opacity: 1;
		margin: 0 auto;
		line-height: 70rpx;
		text-align: center;
		font-size: 36rpx;
		margin-top: 20rpx;
	}

	.click {
		background: #FCC928;
		color: #fff;
		text-align: center;
	}

	.click1 {
		border-radius: 48rpx;
		border: 2rpx solid #FF851D;
		color: #FF851D;
	}
</style>